<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HomePage</title>

</head>

<body>
    <h1>日期选择：</h1>
    <form>
        <!-- <p>Select a date:</p>
        <label for="date"></label>
        <input type="date" id="date" name="date">
        <input type="button" id="submit-btn" value="Submit" onclick="submitDate()"> -->
        <div class="date-picker-container">
            <input type="text" class="date-picker-input" id="datePickerInput" readonly />

            <div class="date-picker-calendar" id="datePickerCalendar">
                <div class="date-picker-header">
                    <div class="date-picker-btn date-picker-prev-btn" id="prevMonthBtn">&lt;</div>
                    <div id="currentMonthYear"></div>
                    <div class="date-picker-btn date-picker-next-btn" id="nextMonthBtn">&gt;</div>
                </div>
                <div class="date-picker-body" id="calendarDays"></div>
            </div>
        </div>
        <div class="up-to-date"></div>
    </form>

    <p id="current-time"></p>

    <div id="display"></div>

    <script>
        // import "./cwt.css";
        var favoriteDates = ["2023-12-25", "2023-12-31"]; // 将你喜欢的日期存储在数组中

        function submitDate() {
            var selectedDate = document.getElementById("date").value;
            alert("You have selected: " + selectedDate);
            document.getElementById("display").innerText =
                "Selected Date: " + selectedDate;
        }

        function getCurrentTime() {
            var currentTime = new Date();
            var hour = currentTime.getHours();
            var minute = currentTime.getMinutes();
            var second = currentTime.getSeconds();

            hour = addLeadingZero(hour);
            minute = addLeadingZero(minute);
            second = addLeadingZero(second);

            var timeString = hour + ":" + minute + ":" + second;
            document.getElementById("current-time").textContent =
                "当前时间：" + timeString;

            setTimeout(getCurrentTime, 1000);
        }

        function addLeadingZero(timeValue) {
            return (timeValue < 10 ? "0" : "") + timeValue;
        }

        function setFavoriteDates() {
            var dateInputs = document.querySelectorAll('input[type="date"]');

            for (var i = 0; i < dateInputs.length; i++) {
                if (favoriteDates.includes(dateInputs[i].value)) {
                    dateInputs[i].classList.add("favorite-date");
                } else {
                    dateInputs[i].classList.remove("favorite-date");
                }
            }
        }
        setPastOrFutureDateStyles();
        function setPastOrFutureDateStyles() {
            var dateInputs = document.querySelectorAll('input[type="date"]');
            var today = new Date().toISOString().slice(0, 10);

            for (var i = 0; i < dateInputs.length; i++) {
                if (dateInputs[i].value < today) {
                    dateInputs[i].classList.add("past-date");
                    dateInputs[i].classList.remove("future-date");
                } else {
                    dateInputs[i].classList.add("future-date");
                    dateInputs[i].classList.remove("past-date");
                }
            }
        }

        setFavoriteDates();
        getCurrentTime();

        const datePickerInput = document.getElementById("datePickerInput");
        const datePickerCalendar = document.getElementById("datePickerCalendar");
        const prevMonthBtn = document.getElementById("prevMonthBtn");
        const nextMonthBtn = document.getElementById("nextMonthBtn");
        const currentMonthYear = document.getElementById("currentMonthYear");
        const calendarDays = document.getElementById("calendarDays");

        let selectedDate = null;
        let currentYear = null;
        let currentMonth = null;

        function initDatePicker() {
            const today = new Date();
            currentYear = today.getFullYear();
            currentMonth = today.getMonth();

            setSelectedDate(today);

            // 绑定事件
            datePickerInput.addEventListener("click", () => {
                datePickerCalendar.classList.toggle("date-picker-calendar--show");
                updateCalendar(currentYear, currentMonth);
            });

            prevMonthBtn.addEventListener("click", () => {
                if (currentMonth === 0) {
                    currentMonth = 11;
                    currentYear--;
                } else {
                    currentMonth--;
                }
                updateCalendar(currentYear, currentMonth);
            });

            nextMonthBtn.addEventListener("click", () => {
                if (currentMonth === 11) {
                    currentMonth = 0;
                    currentYear++;
                } else {
                    currentMonth++;
                }
                updateCalendar(currentYear, currentMonth);
            });
        }

        function setSelectedDate(date) {
            selectedDate = date;
            datePickerInput.value = selectedDate.toLocaleDateString("zh-CN");
            //获取到时间后跳转页面
            //window.location.href = `http://localhost:3000/detail?date=${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
            //window.location.href = "../code.html";
        }

        function updateCalendar(year, month) {
            // 更新当前年份和月份显示
            currentMonthYear.innerText = `${year}年${month + 1}月`;

            // 计算当月第一天和最后一天的日期
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);

            // 创建日期元素并添加到日历中
            calendarDays.innerHTML = "";
            for (let i = 1; i <= lastDay.getDate(); i++) {
                const day = document.createElement("div");
                day.innerText = i;
                let arr10 = [1, 2, 17, 20, 21, 22];
                let arr9 = [16, 17, 18, 19, 22, 23, 24, 25, 26, 27, 30, 31];
                let arr11 = [5, 7]
                arr9.forEach((item) => {
                    if (i == item && month == 9) {
                        day.classList.add("activeRed");
                    }
                });
                arr10.forEach((item) => {
                    if (i == item && month == 10) {
                        day.classList.add("activeRed");
                    }
                });
                arr11.forEach((item) => {
                    if (i == item && month == 11) {
                        day.classList.add("activeRed");
                    }
                });
                // if(flag11){
                //   day.classList.add('activeRed')

                // }

                day.classList.add("date-picker-day");
                day.addEventListener("click", () => {
                    setSelectedDate(new Date(year, month, i));
                    datePickerCalendar.classList.remove("date-picker-calendar--show");
                    console.log(datePickerInput.value.split("/"));
                    let yue = datePickerInput.value.split("/")[1];
                    let day = datePickerInput.value.split("/")[2];
                    // window.open(`https://gitee.com/jiliguala666/46544534/blob/cwt/%E9%99%88%E4%BC%9F%E5%BA%AD/%E9%99%88%E4%BC%9F%E5%BA%AD${yue}.${day}.html`)
                    //   window.open(
                    //     `http://proceed-without-hesitation.gitee.io/project/${yue}.${day}/index.html`
                    //   );
                    window.open(`./work/${yue}month/${yue}.${day}/index.html`);
                });
                if (
                    selectedDate &&
                    year === selectedDate.getFullYear() &&
                    month === selectedDate.getMonth() &&
                    i === selectedDate.getDate()
                ) {
                    day.classList.add("date-picker-day--selected");
                }
                calendarDays.appendChild(day);
            }
        }

        initDatePicker();

    </script>

</body>

</html>